<template>
    <div class="payin payout">
        <section class="order-main-header">
            <mt-header title="提币">
            <mt-button  icon="back" slot="left" @click="handleClose()"></mt-button>
            <a @click="addressChange()"  slot="right" ><img src="../../assets/address.png"></a>
            </mt-header>
        </section>
      <section class="payin-card otc">
          <div class="choose-coin">
              <span>选择币种</span>
              <span class="select" @click="qrcodeVisible()">{{coinAddressChoose.name}}  <img  class="rotate" src="../../assets/my/right.png"></span>
          </div>
          <div class="line-coin" v-if="coinAddressChoose.name=='USDT'">
              <span class="type">链类型</span>
              <div class="flex-start"  >
                  <div class="coin"  >OMNI</div>
                   <div class=" coin-error"  >ERC20</div>
                    <div class="coin-error"  >ERC20</div>
              </div>
          </div>
          <div class="payout-content">
                <div class="wapper">
                    <div class="payout-address">
                        <div class="ress">
                            <span>提币地址</span>
                        </div>
                        <div class="flex-between copy copy-add">
                            <input placeholder="输出或长按粘贴地址" v-model="coinAddress" @mouseover="coinChangeAddress()" >
                            <router-link to="/safeCenter/address"><img src="../../assets/code.png"></router-link>
                            <div id="addr-list" v-show="coinAddressVish &&coinAddressList.length>0" >
                                <li v-for="(ticker, i) in coinAddressList" v-bind:key="i" ><span style="width:100%" @click="addSelect(ticker)">{{ticker.address}}</span></li>
                            </div>
                        </div>
                    </div>
                    <div class="payout-bumber payout-address">
                        <div class="ress">
                            <span>数量</span>
                        </div>
                        <div class="flex-between copy">
                            <input :placeholder="'最小提币数量'+(coinData.minWithdraw?coinData.minWithdraw:'')" class="copy-form" v-model="minWith">
                             <span>{{coinAddressChoose.name}}</span>
                              <a class="with-draw" @click="minWithdraws()">全部</a>
                        </div>
                    </div>
                    <div class="payout-title">
                        <div class="flex-between">
                            <span>可用：{{coinData.total}} &nbsp;</span>
                            <span>手续费：{{feeAmountsTotal}} {{coinAddressChoose.name}}</span>
                        </div>
                         <div class="tip">
                            <p>•温馨提示 </p>
                            <p>•最小提币数量为：{{coinData.minWithdraw}}&nbsp;{{coinData.feeName}}。</p>
                            <p>•为保障资金安全，当您账户安全策略变更、密码修改、我们会对提币进行人工审核，请耐心等待工作人员电话或邮件联系。</p>
                            <p>•您的提币操作一旦完成，对应的资产所有权将由您变更为目标地址所对应的账户所有人享有，请您务必在提币操作前，仔细核对提币地址信息，确保提币属于自愿行为，并确认不涉及任何传销、非法集资、诈骗等违法情形，谨防上当受骗，避免造成不必要的财产损失。</p>
                            <p>•请务必确认电脑及浏览器安全，防止信息被篡改或泄 </p>
                        </div>
                    </div>
                    <div class="payout-btn"  v-if="!cationModal">
                             <button class='addBtn'  @click="payoutBtn()">提币</button>
                    </div>
                </div>
          </div>
          <section class="el-toast" v-if="cationModal">
              <div class="el-modal">
                    <div class="total-load">
                        <div class="flex-between total-flex">
                            <span>安全验证</span>
                            <span @click="cationModalCancel()">取消</span>
                        </div>
                        <div class="flex-between column-flex">
                            <div class="flex-colow">
                                <span>{{mobile_num}}</span>
                                <input placeholder="请输入验证码"  v-model="userCode">
                            </div>
                            <b class="codeBtn" @click="sendCode()" :style="btnColor">{{sendCodeText}}</b>
                        </div>
                        <div class="flex-between column-flex">
                            <div class="flex-colow">
                                <span>资金密码</span>
                                <input type="password" placeholder="请输入资金密码" v-model="userPassWord">
                            </div>
                        </div>
                    </div>
                    <button class="total-btn" @click="security()">提币</button>
              </div>
          </section>
              <div class="v-modal" style="z-index: 2000;" v-if="cationModal"></div>
    </section>
      <mt-actionsheet
        :actions="actions"
       v-model="sheetVisible">
        </mt-actionsheet>
    </div>
</template>
<script>
import {getLang} from '../../components/util/language/cn';
import axios from 'axios'
import { Actionsheet } from 'mint-ui';
import { Toast } from 'mint-ui';

export default {
    name:'',
   data(){
         return {
             coinList:'',
             coinAddress:'',
             sheetVisible:false,
               actions: [],
           coinAddressChoose:'',
           qrcodeInfo:'',
           coinData:'',
           minWith:null,
           cationModal:false,
             sendCodeText:'获取验证码',
            btnColor:'color:#5298F1',
            mobile_num:'',
            userPassWord:'',
            userCode:'',
            feeAmount:"",coinAddressVish:false,
            feeAmountsTotal:'',coinAddressList:[],
            timeId:''
         }
    },
    watch: {
      minWith(val) {
        this.feeAmountsTotal=((parseFloat(val*this.coinData.feeRatio))+parseFloat(this.feeAmount)).toFixed(2);
      }
    },
    mounted() {
        this.getCoinList();
         this.$http.post('v1/session?'+ new Date().getTime(),).then((res)=>{
               if(res.data.data.loginName.search("@")>-1){
                 this.mobile_num=res.data.data.email_num.substring(0,3)+'****'+res.data.data.email_num.substring(res.data.data.email_num.length-8,res.data.data.email_num.length);
            }else{
                  this.mobile_num=res.data.data.mobile_num.substring(0,3)+'****'+res.data.data.mobile_num.substring(res.data.data.mobile_num.length-3,res.data.data.mobile_num.length);
            }
        })
    },
    methods: {  
        addSelect(val){
            this.coinAddress=val.address;
            this.addressLeave();
        },
         coinChangeAddress(val){
             this.coinAddressVish=true;
        },
        addressLeave(){
            this.coinAddressVish=false;
        },
        security(){
            let lang=getLang;
            if(this.userCode==''){
                Toast("验证码不能为空");
                return;
            }
            if(this.userPassWord==''){
                Toast("密码不能为空");
                return;
            }
            let payoutData={
                    code:this.userCode,
                    address:this.coinAddress,
                    amount:this.minWith,
                    id:this.coinAddressChoose.id,
                    safeWord:this.userPassWord,
                    tag:''
            }
            this.$http.post('/v1/account/withdrawCoin',payoutData).then(res=>{
                let data=res.data;
                if (data.code == 1) {
                Toast(lang.js.payout.authTips,);
            }else if (data.code == 2) {
                Toast(lang.js.payout.minTips +data.data);
            } else if (data.code == 3) {
                Toast(lang.js.payout.maxTips+data.data);
            } else if (data.code == 4) {
                Toast(lang.js.payout.forbidTips);
            } else if (data.code == 5){
                Toast(lang.js.payout.fundsTips);
            } else if (data.code == 6) {
                Toast(lang.js.payout.feesTips);
            } else if (data.code == 7) {
                Toast(lang.js.payout.timesTips);
            } else if (data.code == 8) {
                Toast(lang.js.payout.safeNoneTips);
            } else if (data.code == 9) {
                Toast(lang.js.payout.safeErrorTips);
            } else if (data.code == 10) {
                Toast(lang.js.payout.safeErrorTips);
            } else if (data.code == 11) {
                Toast(lang.js.payout.invalidAddress);
            } else if (data.code == 100) {
                Toast(lang.codeNotSendTips);
            }  else if (data.code == 101) {
                Toast(lang.codeFrequentTips);
            }else if (data.code == 102) {
                Toast(lang.codeErrorTips+data.data);
            }else if (data.code == 200) {
                Toast("提币成功");
                this.coinAddress='';
                this.cationModal=false;
                this.minWith='';
                 this.userPassWord='';
                this.userCode='';
                clearInterval(this.timeId)
                this.sendCodeText = '重新发送';
            } else {
                Toast(lang.error);
            }
            });
        },
        payoutBtn(){
            this.cationModal=true;
        },
        minWithdraws(){
            this.minWith=this.coinData.total;
        },
        addressChange(){
              this.$router.push({
          path: `/finance/payoutRecord/${'?id='+this.coinAddressChoose.id+'&index='+this.coinAddressChoose.name}`
        });
        },
         sendCode() {
            if(!isNaN(this.sendCodeText)) return
            this.$http.post('/v1/account/sendCode').then(res=>{
                res = res.data
                if(res.code == 200){
                    this.sendCodeText = 60
                    this.btnColor = 'color:#ddd'
                    this.timeId = setInterval(function(){
                        this.sendCodeText--
                        if(this.sendCodeText == 0){
                            clearInterval(this.timeId)
                            this.btnColor = 'color:#3381ff'
                            this.sendCodeText = '重新发送'
                        }
                    }.bind(this),1000)
                }
            }).catch(err=>{

            })
        },
        getParamsByCoin(){
           this.$http.post('v1/account/getParamsByCoin',{id:this.coinAddressChoose.id}).then((res)=>{
                 this.coinData=res.data.data;
                 this.feeAmount=res.data.data.feeAmount;
                   this.feeAmountsTotal=res.data.data.feeAmount;
                   this.coinAddressList=res.data.data.addresses;
                })
            },
          copy(data) {  
          Toast("复制成功");
        var Url2=data;
        var oInput = document.createElement('input');
        oInput.value = Url2;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        oInput.className = 'oInput';
        oInput.style.display='none';
        },
        qrcodeVisible(){
            this.sheetVisible=true;
        },
        getCoinList(){
              this.$http.post('v1/coinList').then((res)=>{
                  let data=res;
                  this.coinList=data.data.data;
                this.actions= this.coinList;
                   for (let i = 0; i <  this.coinList.length; i++) {
                       if(this.$store.state.payout){
                       if(this.$store.state.payout==this.coinList[i].id){
                            this.coinAddressChoose=this.coinList[i];
                       }
                       }else{
                              this.coinAddressChoose=this.coinList[0];
                       }
                     
                          this.actions[i]["name"]=this.coinList[i].name;
                           this.actions[i]["method"]=this.coinChange;
                   }
            this.getParamsByCoin();
        })
    },
    coinChange(val){
       this.coinAddressChoose=val;
       this.getParamsByCoin();
    },
        　　handleClose(){
                this.$router.go(-1);
            },
             cationModalCancel(){
        this.cationModal=false;
        this.userPassWord='';
        this.userCode='';
          clearInterval(this.timeId)
        this.sendCodeText = '重新发送';
    },
    },
}
</script>
<style lang="less" scoped>
.payout{
    .payout-btn{
        height: 86px;
        position: relative;
        background: #222240;
    }
     .codeBtn{
                text-align: center;
                font-size: 24px;
                color: #3381ff;
                height: 120px;
                line-height: 120px;
                padding-right: 30px;
            }
        input{
                line-height: 60px;
                border:none;
                background:none;  
                outline:none;  
                font-size: 30px;
                height: 60px;
                flex: 1;
                color: #E0E0F9;
                width: 90%;
            }
    background: #222240;
    height: 100%;
     .ress{
            color: #E0E0F9;
            font-size:28px;
             height:60px;
            line-height: 60px;
        }
        .copy{
            height: 60px;
            line-height: 60px;
            color: #8686C0;
        }
        .copy-add{
                    display: inline-block;
        width: 100%;
        height: 36px;
        border-radius: 4px;
        margin-bottom: 20px;
        line-height: 36px;
        padding-left: 5px;
        }
        .copy-form{
            display: block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            width: 60%;
            height: 72px;
            border: 1px solid #222240;
            font-size: 32px;
            padding-right: 20px;
            border-radius: 8px;
            background: #222240;
            color: #8686C0;
        }
}
.payout-title{
    background: #222240;
    padding: 20px 20px 20px 30px;
   .flex-between span{
         color: #E0E0F9;
         margin-bottom: 30px;
         margin-top: 20px;
    }
    .tip{
       p{
            line-height:40px;
            padding-bottom: 40px;
       }
        color: #E0E0F9;
    }
}
.choose-coin{
    .select{
        float: right;
        padding-right: 30px;
    }
    span{
        color: #8686C0;
        padding-left: 30px;
    }
}
.payout-content{
    .payout-address{
        border-bottom: 2px solid #161736;
        padding: 20px 20px 20px 30px;
    }
}
.line-coin {
    padding-left: 30px;
    .type{
        height:100px;
        font-size:28px;color:rgba(224,224,249,1);
        line-height:100px;
    }
    .coin{
        width:180px;
        height:68px;
        border-radius:4px;
        border:2px solid rgba(51,129,255,1);
        text-align: center;
        line-height: 68px;
        margin-right: 40px;
         color: #E0E0F9;
    }
    .coin-error{
          width:180px;
        height:68px;
        border-radius:4px;
        text-align: center;
        line-height: 68px;
        margin-right: 40px;
         color: #E0E0F9;
        border:2px solid rgba(224,224,249,1);
        background: #a1a1c1;
    }
    .active{
        color: #3381FF;
        border:2px solid rgba(51,129,255,1);
    }
    .no-active{
        color: #E0E0F9;
        border:2px solid rgba(224,224,249,1);
    }
}
.flex-center{
    display: flex;
    align-items: center;
}
 .flex-between{
      display: flex;
        justify-content: space-between;
    }
.flex-start{
    display: flex;
    align-items: start;
}
.flex-all-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
  .addBtn{
                display: block;
    width: 90%;
    text-align: center;
    margin-bottom: 0;
    border-radius: 10px;
    height: 86px;
    margin: 0 auto;
    font-size: 32px;
    line-height: 86px;
    color: #FFFFFF;
    background: #5298f1;
    z-index: 10001;
    position: fixed;
    bottom: 20px;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
        }
.mint-header{
    height: 100px;
    font-size: 32px;
    background-color: #222240;
    color: #E0E0F9
}
        
.rotate{
    transform:rotate(-180deg);
-webkit-transform:rotate(-180deg);
-moz-transform:rotate(-180deg);
-o-transform:rotate(-180deg);
-mz-transform:rotate(-180deg);
width: 30px;
height: 30px;
}
::-webkit-input-placeholder {
    color: #8686C0;
    font-size: 28px
}

:-moz-placeholder,::-moz-placeholder {
    color: #8686C0;
    font-size: 28px
}

:-ms-input-placeholder {
    color: #8686C0;
    font-size: 28px
}
.el-toast .v-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
    background: #000;
}
      #addr-list {
    width: 80%;
    position: absolute;
    background-color: #fff;
    //border-radius: 4px;
    box-shadow: 2px 2px 3px 2px #fff;
} 
#addr-list li {
    width: 100%;
    padding-left: 15px;
    cursor: pointer;
    transition: .2s ease-out;
    line-height: 60px;
    height: 60px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #606266;
    box-sizing: border-box;
}
.el-toast{
     input{
                line-height: 60px;
                border:none;
                background:none;  
                outline:none;  
                font-size: 30px;
                height: 60px;
                flex: 1;
                color: #E0E0F9;
            }
    height: 410px;
     position: fixed;
    background: #222240;
    width: 100%;
    text-align: center;
    bottom: 0;
    left: 50%;
    z-index: 10000;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: -webkit-transform .3s ease-out;
    transition: -webkit-transform .3s ease-out;
    transition: transform .3s ease-out;
    transition: transform .3s ease-out, -webkit-transform .3s ease-out;
    .total-load{
        .total-flex{
            padding-right: 30px;
            height: 80px;
            line-height: 80px;
            border-bottom: 2px solid #161736;
            padding-left: 30px;
             span{
            color: #E0E0F9;
            height: 80px;
            line-height: 80px;
            }
        }
        .column-flex{
             span{
            color: #E0E0F9;
            height: 50px;
            line-height: 70px;
        }
            height: 120px;
            padding-left: 30px;
             border-bottom: 2px solid #161736;
        }
    }
.flex-colow{
        flex-direction: column;
        display: flex;
        text-align: left;
    }
    .total-btn {
            display: block;
            width: 100%;
            line-height: 58px;
            font-size: 30px;
            text-align: center;
            margin:0 auto;
            margin-bottom: 0;
            border-radius: 4px;
            height:86px;
            font-size:32px;
            color: #FFFFFF;
            background:rgba(82,152,241,1);
            z-index: 10001;
    }
}
.with-draw{
    color: #5584FF;
    margin-left: 30px;
}
</style>